/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Variables
\* -------------------------------------------------------------- */

@use "sass:math";

$hamburger-size: 22px !default;
$hamburger_padding: 0 !default;
$hamburger_bg: transparent !default;
$hamburger_fg: $header_fg !default;
$hamburger-stroke_height: 2px !default;
$hamburger_borderRadius: $component_borderRadius !default;
$hamburger-stroke_borderRadius: $hamburger-stroke_height !default;
$hamburger_transition: $global-default_timing !default;
$hamburger_jstransform: "isToggled" !default;

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

@keyframes chevron-pulse {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@for $i from 1 through 3 {
    .Hamburger-svgchevron path.a#{$i} {
        animation-delay: -($i - ($i * 0.5)) + 0.5s;
    }
}

.Hamburger {
    border: none;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: $hamburger_transition;
    user-select: none;
    background: transparent;
    outline: none;
    tap-highlight-color: transparent;
    height: $hamburger-size;
    width: $hamburger-size;
    background: $hamburger_bg;
    border-radius: $hamburger_borderRadius;

    @include maxWidth {
        position: absolute;
    }
}

@mixin hamburger-menuLines {
    display: inline-block;
    height: $hamburger-stroke_height;
    width: #{$hamburger_size - $hamburger_padding};
    border-radius: $hamburger-stroke_borderRadius;
    transition: $hamburger_transition;
    background-color: $hamburger_fg;
}

.Hamburger-menuLines {
    @include hamburger-menuLines;
    position: relative;

    &::before,
    &::after {
        @include hamburger-menuLines;
        content: "";
        position: absolute;
        left: 0;
        transform-origin: ($hamburger-size * 0.25) center;
    }

    &::before {
        top: ($hamburger-size * 0.25);
    }

    &::after {
        top: -(math.div($hamburger-size, 3.5));
    }

    .#{$hamburger_jstransform} & {
        transform: scale3d(1, 1, 1);
    }
}

.Hamburger-menuXcross {
    padding: 0;
    height: $hamburger-size;
    width: $hamburger-size;

    &.#{$hamburger_jstransform} {
        .Hamburger-menuLines {
            background: transparent;

            &::before,
            &::after {
                transform-origin: 50% 50%;
                top: 0;
                left: 0;
                width: #{$hamburger_size - $hamburger_padding};
                background-color: mix($hamburger_fg, $hamburger_bg, 60%);
            }

            &::before {
                transform: rotate3d(0, 0, 1, 45deg);
            }

            &::after {
                transform: rotate3d(0, 0, 1, -45deg);
            }
        }
    }
}
